<template>
    <el-form :model="form" label-width="100px" style="max-width:680px">
      <el-form-item label="SMTP 主机"><el-input v-model="form.host" /></el-form-item>
      <el-form-item label="端口"><el-input v-model="form.port" type="number" /></el-form-item>
      <el-form-item label="用户名"><el-input v-model="form.user" /></el-form-item>
      <el-form-item label="密码"><el-input v-model="form.pass" type="password" show-password /></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('save', form)">保存</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { reactive, watch } from 'vue'
  
  const props = defineProps({
    modelValue: { type: Object, default: () => ({}) }
  })
  const emit = defineEmits(['update:modelValue','save'])
  
  const form = reactive({
    host: '', port: 465, user: '', pass: '',
    ...props.modelValue
  })
  
  watch(() => props.modelValue, v => Object.assign(form, v || {}))
  watch(form, v => emit('update:modelValue', v), { deep: true })
  </script>
  